<template>
  <div>
    <el-table :data="deliverList "  stripe style="width: 100%;">
      <el-table-column prop="deliverMethodName" label="配送方式" align="center" width="80px"/>
      <el-table-column prop="expressNo" label="快递单号" :show-overflow-tooltip="true" width="150px"/>
      <el-table-column prop="expressCompany" label="快递公司" :show-overflow-tooltip="true"/>
      <el-table-column prop="deliverAmount" label="配送费用(元)" align="center"/>
      <el-table-column prop="packStatusName" label="包裹状态"/>
      <el-table-column prop="content" label="包裹流转信息" :show-overflow-tooltip="true" width="250px">
        <template slot-scope="scope">
          <el-popover placement="top-start"  width="200" trigger="hover" v-if="scope.row.contentArray && scope.row.contentArray.length > 0">
             <div style="font-size:12px;color:#606266;" v-for="item in scope.row.contentArray">
               <div>状态：{{item.actionName}}</div>
             <div style="margin: 5px 0;">接收站：{{item.acceptStation}}</div>
             <div>时间点：{{item.acceptTime}}</div>
             </div>
             <span slot="reference"><transporter theme="outline" size="24" fill="#333"/>{{scope.row.contentArray[0].acceptStation}}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="consigneeName" label="收货人"/>
      <el-table-column prop="mobileNum" label="手机号" :show-overflow-tooltip="true"/>
      <el-table-column prop="zipCode" label="邮编">
        <template slot-scope="scope">
          {{scope.row.zipCode == 'null' ? '':scope.row.zipCode}}
        </template>
        </el-table-column>
      <el-table-column prop="province" label="收货地址" :show-overflow-tooltip="true" align="left" width="250px">
        <template slot-scope="scope">
          {{scope.row.province}}{{scope.row.city}}{{scope.row.county}}{{scope.row.addressDetail}}
        </template>
      </el-table-column>
      <el-table-column prop="deliverTypeName" label="发货类型"/>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["deliverList"],
  data() {
    return {
      zIndex: 3000,
      dataList:[],
    }
  },
  created() {
    // this.dataList = JSON.parse(JSON.stringify(this.deliverList)) ;
    // if(this.dataList && this.dataList.length>0){
    //   this.dataList.forEach((data,index) =>{
    //     data.content = JSON.stringify(data.content);
    //     console.log(data.content)
    //   })
    // }

  },
  methods: {
  },
};
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }
</style>
